<template>
    <div class="apiSearchContainer">
        <span class="inputLabel">微服务名称</span>
        <el-select v-model="configCenterSearchData.application" placeholder="微服务名称" class="searchInfoInput" clearable>
            <el-option :label="item.applicationName" :value="item.applicationName" v-for="item in applicationList" :key="item.id"/>
        </el-select>

        <span class="inputLabel">微服务环境</span>
        <el-input v-model="configCenterSearchData.profile" placeholder="微服务名称" class="searchInfoInput"></el-input>

        <span class="inputLabel">键</span>
        <el-input v-model="configCenterSearchData.key" placeholder="键" class="searchInfoInput"></el-input>

        <span class="inputLabel">值</span>
        <el-input v-model="configCenterSearchData.value" placeholder="值" class="searchInfoInput"></el-input>

        <el-button type="primary" icon="SearchOutlined" :loading="searchLoading" class="searchButtonClass" @click="queryApiInfo()">搜索</el-button>
        <el-button icon="RedoOutlined" @click="resetInput()">重置</el-button>
    </div>
</template>

<script>
import {applicationInfoQuery} from "@/request/service";
import {configInfoQuery} from "@/request/configCenter";

export default {
    name: "ServiceConfigSearch",
    data() {
        return {
            applicationList: [],
            searchLoading: false
        }
    },
    computed: {
        configCenterSearchData() {
            return this.$store.state.configCenterSearchData;
        }
    },
    methods: {
        queryApiInfo() {
            this.searchLoading = true
            configInfoQuery(this.configCenterSearchData).then(res => {
                this.$store.commit('changeConfigCenterDataList', res.data);
                this.searchLoading = false
            }).catch(res => {
                this.searchLoading = false
            })
        },
        resetInput() {
            let searchData = {
                application: '',
                profile: '',
                key: '',
                value: '',
                pageInfo: {
                    pageIndex: this.configCenterSearchData.pageInfo === undefined ? 1 : this.configCenterSearchData.pageInfo.pageIndex,
                    pageSize: this.configCenterSearchData.pageInfo === undefined ? 10 : this.configCenterSearchData.pageInfo.pageSize
                }
            }
            this.$store.commit('changeConfigCenterSearchData', searchData);
        }
    },
    created() {
        applicationInfoQuery(this.configCenterSearchData).then(res => {
            let global = {
                id: 0,
                applicationName: "GLOBAL"
            }
            res.data.unshift(global)
            this.applicationList = res.data
        })
    }
}
</script>

<style scoped lang="less">
.apiSearchContainer {
    width: 100%;
    height: 10%;
    .searchInfoInput {
        width: 15%;
        padding-left: 1%;
    }
    .inputLabel {
        padding-left: 1%;
        font-weight: 700;
        font-size: 15px;
        color: #606266;
    }
    .searchButtonClass {
        margin-left: 1%;
    }
}
</style>